<template>
    <div class="upload-file-card" v-loading="uploadimageloading" :style="{ }">
        <div :class="['el-upload',!uploadFileData.name&&'empty']">
            <i class="el-icon-edit" :style="{fontSize:'16px'}"></i>
            <i class="el-icon-plus" :style="{fontSize:'16px'}"></i>
            <input title="点击上传文件" @change="imageChange" type="file" name="file" class="upload-picture-input">
        </div>
        <span class="file-name">{{ uploadFileData.name }}</span>
    </div>  
</template>
<script>
export default {
    name:'uploadFileCard',
    props:{
        size:{
            type:Number,
            default:40
        },
        file:{
            type:Object,
            default:{} 
        }
    },
    watch:{
        file(val){
            this.uploadFileData= val 
        }
    },
    data(){
        return {
            uploadimageloading:false,
            uploadFileData:{},
        }
    },
    methods:{
        async imageChange(e){
            const target = e.target;
            const files = target.files;
            if(files.length){
                const file = files[0]
                this.uploadimageloading = true
                this.$emit('uploading')
                const result = await this.upload(file) 
                if(result){
                    const resfile = { name:file.name,size:file.size,type:file.type,src:result }
                    this.uploadFileData = resfile
                    this.$emit('uploaded',resfile) 
                }
                target.value = ''
                this.uploadimageloading = false
            }
            
        },
        async upload(file){
            let res
            if (file.size / 1000 / 1000 > 100 || file.size==0 ) {
                this.$message({
                    message:'由于微信限制，文件需要大于0M且小于100M',
                    type:'error'
                })
                return undefined
            }
            try {
                res = await this.uploadFile(file,{})
            } catch (error) {
                console.log(error)
                return  
            }
            return res
        }
    }   
}
</script>
<style scoped>
.upload-file-card{
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    border:1px solid #c0ccda;
    padding: 10px;
    border-radius: 6px;
}
.el-upload{
    border: 1px dashed #c0ccda;
    border-radius: 3px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    vertical-align: top; 
    position: relative;
    z-index: 1;
    opacity: 1; 
    display:flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0; 

}
.file-name{
    word-break: break-all;
    padding-left: 10px;
    color: #333
}
.upload-file-card .el-upload .el-icon-plus{
    display:none
}
.upload-file-card .el-upload:hover,
.upload-file-card .empty{
    border-color: #409EFF;
    color: #409EFF;
    background: rgba(255,255,255,.7);
    opacity: 1;
}
.upload-file-card .empty .el-icon-edit{
    display: none
}
.upload-file-card .empty .el-icon-plus{
    display: inline-block;
}
.upload-picture-input{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}
.upload-picture-thumb{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit:cover;
    border-radius: 3px;
    opacity: 1;
}
</style>